﻿<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	html,body{
		height: 100%;
		width: 100%;
	}
	#content{
		width: 100%;
		height: 100%;
		border-radius: 10px;
		background-size: 100% 100%;

	}
	.ui-dialog{
		height:auto;
		width: 50px;
		height:50px;
		position: absolute;
		z-index: 999;
		top: 110px;
		left: 220px;
		background-image: url(images/windmill.png);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.shadow{
		height:auto;
		width: 50px;
		height:50px;
		position: absolute;
		z-index: 99;
		top: 110px;
		left: 220px;
		background-image: url(images/windmill.png);
		background-size: 100% 100%;
	}
	p{
		display: none;
		width: 130px;
		background-color: rgba(55,55,55,0.5);margin-left: 50px;
	}
	.model{
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 99999;
		background-color: rgba(51,51,51,0.5);
		top: 0;
		left: 0;
		display: none;
	}
	legend{
		float: right;
		width: 20px;
		height: 20px;
		line-height: 20px;
		background-color: white;
		margin-right:20px;
		margin-top:20px;
		text-align: center;
		border-radius: 5px;
		cursor: pointer;
	}
	table{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -110px;
		margin-top: -50px;
		width: 220px;
		height: 100px;
		background-color: rgba(255,255,255,0.5);
		border-radius: 5px;
	}
	input{
		background-color: rgba(100,100,100,0.6);
		border:1px solid #BBFFFF;
	}
	#ensure{
		border-radius: 5px;
	}
	#ansure2{
		position: fixed;
		bottom: 5px;
		right: 5px;
		z-index: 99;
		cursor: pointer;
	}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="content">
<div class="shadow">
</div>
<section class="ui-dialog" >
<p><span>名称：</span><span id="inputname"></span><br/><span>功率：</span><span id="inputwork"></span></p>
</section>
<div class="model">
	<div class="contentInput">
		<legend>X</legend>
		<table style="text-align:center">
			<tr>
				<td>名称：</td>
				<td><input type="text" id="name"></td>
			</tr>
			<tr>
				<td>功率：</td>
				<td><input type="text" id="work"></td>
			</tr>
			<tr>
				<td colspan="2" ><button id="ensure">确定</button></td>
			</tr>
		</table>
	</div>	
</div>
<div id="ansure2">确定</div>
</div>
</body>
<script type="text/javascript">



$(function(){
    var mouseBeginX,mouseBeginY;//鼠标初始位置
	$.ajax({
		url: 'example.txt',
		type: 'POST',
		dataType: 'html',
		async:false
	})
	.done(function(data) {
		console.log("success");
		 $(".right").html(data)
	})
	.fail(function() {
		console.log("error");
	})
	.always(function() {
		console.log("complete");
	}).responseText;
	$(".model").css('display', 'none');
	

    var content1;
    var left=220;
    var leftt=left+50;
		 var moveDialog;
		 // window.onload=function(){
		 	moveDialog=document.getElementsByTagName("section");
	function clock(){
		for (var i = 0;i<moveDialog.length;i++) {

			//遍历节点，动态添加删除id属性
		    $(moveDialog[i]).live("mousedown",function(e){
		    	mouseBeginX=e.pageX;
				mouseBeginY=e.pageY;
		    	if ((mouseBeginX<270 && mouseBeginY<170)&&(mouseBeginX>220 && mouseBeginY>120)) {
		    		this.setAttribute("id","dialog");
		    	}else{
		    		// this.setAttribute("id","dialog");
		    	};
			})
			$(moveDialog[i]).live("mouseup",function(e){
				// alert("")
				this.removeAttribute("id","dialog");
				var classname="x"+e.pageX+"y"+e.pageY;
				 //console.log(classname)
				 this.setAttribute("id",classname);
				 content1=this.getAttribute("id");
			})
			$(moveDialog[i]).hover(function() {
				/* Stuff to do when the mouse enters the element */
				  $(this).children('p').css('display', 'block');
			}, function() {
				/* Stuff to do when the mouse leaves the element */
				//console.log("end")
				$(this).children('p').css('display', 'none');
			});
			$(moveDialog[i]).live("dblclick",function(){
				if (mouseBeginX>270 && mouseBeginY>170) {
		    		this.setAttribute("id","dialog");
		    	}else{
		    		// this.setAttribute("id","dialog");
		    	};
			})

		 }; 
		}
    // }

	//获取元素对象
	function g(id){return document.getElementById(id);}
  	
	var mouseOffsetX = 0;
	var mouseOffsetY = 0;

	var isDialoging=false;

	$("#dialog").live("mousedown",function(e){
		var e=e||window.event;
		mouseOffsetX = e.pageX-g("dialog").offsetLeft;
		mouseOffsetY = e.pageY-g("dialog").offsetTop;

		isDialoging=true;
	})

	document.onmousemove=function(e){
		var e=e||window.event;
		var mouseX=e.pageX;//鼠标当前位置
		var mouseY=e.pageY;

		var moveX=0;
		var moveY=0;

		if (isDialoging===true) {
			moveX=mouseX-mouseOffsetX;
			moveY=mouseY-mouseOffsetY;

			var pageWidth=document.documentElement.clientWidth;
			var pageHeight=document.documentElement.clientHeight;

		    var dialogWidth=g("dialog").offsetWidth;
		    var dialogHeight=g("dialog").offsetHeight;	

		    var maxX=pageWidth - dialogWidth;
		    var maxY=pageHeight - dialogHeight;

		    moveX = Math.min(maxX,Math.max(left,moveX));
		    moveY = Math.min(maxY,Math.max(110,moveY));

			g("dialog").style.left=moveX+"px";
			g("dialog").style.top=moveY+"px";
		};

	}

	document.onmouseup=function(e){
		isDialoging=false;
		//console.log(e.pageX);

		var mouseEndX,mouseEndY,changeX,changeY;
		mouseEndX=e.pageX;//鼠标结束位置
		mouseEndY=e.pageY;

		changeX=mouseEndX-mouseBeginX;
		changeY=mouseEndY-mouseBeginY;// 

		if (((mouseBeginX<leftt && mouseBeginX>left)  &&  (mouseBeginY<160 && mouseBeginY>110) ) && (changeX>0 || changeY>0)){
				//判断位移和初始位置，是否添加节点
		    	$("#content").append("<section class='ui-dialog'><p><span>名称：</span><span id='inputname'></span><br/><span>功率：</span><span id='inputwork'></span></p></section>");
		    	$(".model").css('display', 'block');
		};

		moveDialog=document.getElementsByTagName("section");
		clock();
	}
	$("legend").on("click",function(){
		$(".model").css('display', 'none');
	})
	$("#ensure").on("mousedown",function(e){
		mouseBeginX=e.pageX;
		mouseBeginY=e.pageY;
		// console.log(mouseBeginX)
		 $(".model").css('display', 'none');
		 $('#'+content1).children('p').children("#inputname").text($("#name").val());
		 $('#'+content1).children('p').children("#inputwork").text($("#work").val());
	})

	$("#ansure2").on("mousedown",function(e){
		mouseBeginX=e.pageX;
	    mouseBeginY=e.pageY;
		alert($(".right").html())
		// var str=$("body").html();
		// $.ajax({
		// 	url: 'example3.txt',
		// 	type: 'POST',
		// 	dataType: 'html',
		// 	data: str,
		// })
		// .done(function(data) {
		// 	console.log("success");
		// 	console.log(data)
		// })
		// .fail(function() {
		// 	console.log("error");
		// })
		// .always(function() {
		// 	console.log("complete");
		// });
		
	})
	
})
</script>
</html>